<template>
  <div class="attention">
    <Navhead labelText="我的关注" />
    <div class="acrosss" v-for="(item,index) in attendata" :key="index">
      <img :src="$axios.defaults.baseURL+item.head_img" alt />
      <div class="info">
        <div class="infoname">{{item.nickname}}</div>
        <!-- split是将字符串以'T'为分隔线变成一个数组,下面的是只要T前面的时间 -->
        <div class="time">{{item.create_date.split('T')[0]}}</div>
      </div>
      <!-- v-if那里要==,是个判断了,不要用单个= -->
      <div class="isatten" @click="cancel(index,item.id)" v-if="item.isaten==true">取消关注</div>
      <div class="isatten addbgc" @click="add(index,item.id)" v-if="item.isaten==false">关注</div>
    </div>
  </div>
</template>

<script>
import Navhead from "@/components/Navhead.vue";

export default {
  components: {
    Navhead
  },
  data() {
    return {
      attendata: []
    };
  },
  methods: {
    loadattenpage() {
      this.$axios({
        url: "user_follows",
        method: "get"
      }).then(res => {
        if (res.status == 200) {
          console.log(res.data.data);

          var attendata = res.data.data.map(user => {
            //user是数组的item
            return { ...user, isaten: true }; //而数组的item就是一个对象,然后给第个item添加一个属性供判断
          });
          this.attendata = attendata;
          console.log(attendata);
        }
      });
    },
    cancel(index, id) {
      this.$axios({
        url: "/user_unfollow/" + id,
        method: "get"
      }).then(res => {
        console.log(res);
        this.attendata[index].isaten = false;
        // this.loadattenpage();不要再调用刷新页面
      });
    },
    add(index, id) {
      this.$axios({
        url: "/user_follows/" + id,
        method: "get"
      }).then(res => {
        console.log(res);
        this.attendata[index].isaten = true;
      });
    }
  },
  mounted() {
    this.loadattenpage();
  }
};
</script>

<style lang="less" scoped>
.attention {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;

  .acrosss {
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    img {
      width: 40px;
      height: 40px;
    }
    .info {
      margin-left: 14px;
      flex: 1;
      .infoname {
        font-size: 16px;
        color: #555;
      }
      .time {
        font-size: 14px;
        color: #bbb;
      }
    }
  }
  .isatten {
    width: 74px;
    height: 30px;
    background-color: #e1e1e1;
    text-align: center;
    line-height: 30px;
    border-radius: 50px;
    font-size: 12px;
    color: #555;
  }
  .addbgc {
    background-color: red;
    color: white;
  }
}
</style>